<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>江南一点雨</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"/>
    <link th:href="@{${#themes.code('customer.css.style')}}" rel="stylesheet" th:remove="tag" />
</head>
<body>


<div class="materialContainer">
    <div class="box">
        <div class="title">统一登录中心</div>
        <form method="post" th:object="${credential}" action="login" onsubmit="login()">
            <div class="input">
                <label for="username" th:utext="#{screen.welcome.label.netid}">用户名</label>
                <input type="text" name="username" id="username">
                <span class="spin"></span>
            </div>
            <div class="input">
                <label for="password" th:utext="#{screen.welcome.label.password}">密码</label>
                <input type="password" th:accesskey="#{screen.welcome.label.password.accesskey}"
                       th:field="*{password}" autocomplete="off" name="password" id="password">
                <span class="spin"></span>
            </div>
            <input type="hidden" name="execution" th:value="${flowExecutionKey}"/>
            <input type="hidden" name="_eventId" value="submit"/>
            <input type="hidden" name="geolocation"/>
            <p th:if="${#request.getMethod().equalsIgnoreCase('POST')}">
                          <span th:each="entry : ${httpRequestInitialPostParameters}" th:remove="tag">
                              <span th:each="entryValue : ${entry.value}" th:remove="tag">
                                  <input type="hidden" th:name="${entry.key}" th:value="${entryValue}" />
                              </span>
                          </span>
            </p>
            <div class="button login">
                <button type="submit">
                    <span>登录</span>
                </button>
                <div class="alert alert-danger" th:if="${#fields.hasErrors('*')}">
                    <i class="fa fa-check">信息认证识别</i>
                </div>
            </div>
        </form>
    </div>
    <script th:src="@{${#themes.code('customer.js.crypto')}}"></script>
    <script type="text/javascript" th:inline="javascript">

        function login(){

            const password = document.getElementById("password").value;
            // var offset = document.getElementById("offset").value;
            // var salt = document.getElementById("salt").value;

            let key = CryptoJS.enc.Utf8.parse('1234567890hijklm');
            let vi = CryptoJS.enc.Utf8.parse('1234567890abcdef');
            let srcs = CryptoJS.enc.Utf8.parse(password);



            var encrypted = CryptoJS.AES.encrypt(srcs, key, {
                iv: vi,
                mode: CryptoJS.mode.CBC,
                padding: CryptoJS.pad.Pkcs7
            });

            console.log("原始数据 : ", password);

            document.getElementById("password").value = encrypted.toString();
            console.log("ase加密 : ", encrypted.toString());
            console.log("解密");

            let decrypted = CryptoJS.AES.decrypt(encrypted.toString(), key, {
                iv: vi,
                mode: CryptoJS.mode.CBC,
                padding: CryptoJS.pad.Pkcs7
            });

            console.log("ase 解码 : " , CryptoJS.enc.Utf8.stringify(decrypted).toString());
        }
    </script>
</div>

</body>
</html>